<template>
  <div>
    <a-form-model ref="ruleForm" :model="item" v-for="(item, index) in formList" :key="index" :rules="rules">
      <a-row>
        <a-col :span="10">
          <a-form-model-item
            label="业务员姓名"
            prop="salespersonName"
            :labelCol="{ span: 8, offset: 1 }"
            :wrapperCol="{ span: 15 }"
          >
            <a-select
              showSearch
              placeholder="请选择业务员姓名"
              v-model="item.salespersonName"
              :disabled="status !== 'operate'"
              :filterOption="filterOption"
            >
              <a-select-option v-for="itm in salesmanList" :key="itm.id" :value="itm.id">{{
                itm.realname
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item
            label="电量比例（%）"
            :prop="`electricityRatio`"
            :labelCol="{ span: 8, offset: 1 }"
            :max="100"
            :min="0"
            :wrapperCol="{ span: 15 }"
          >
            <a-input-number
              :max="100"
              placeholder="请输入电量比例（%）"
              v-model="item.electricityRatio"
              style="width: 100%;"
              :disabled="status !== 'operate'"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="4" style="margin-top: 3px;" v-if="status === 'operate'">
          <a-button
            v-if="formList.length > 1"
            type="link"
            icon="delete"
            style="color: red"
            @click="handleDelsalesman(index)"
            >删除业务员</a-button
          >
        </a-col>
        <a-col :span="24" v-if="status === 'operate'">
          <div style="text-align: center">
            <a-button type="link" @click="handleAddsalesman" v-if="index === formList.length - 1 && formList.length < 3"
              >+ 新增业务员</a-button
            >
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import { apiGetSalesmanList } from '@/api/agentManage'

export default {
  name: 'SalesmanForm',
  props: {
    status: String
  },
  data() {
    return {
      formList: [
        {
          salespersonName: undefined,
          electricityRatio: undefined
        }
      ],
      salesmanList: [],
      rules: {
        salespersonName: [{ required: true, message: '请选择业务员', trigger: 'change' }],
        electricityRatio: [{ required: true, message: '请输入电量比例', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getSalesmanList()
  },
  methods: {
    filterOption(value, option) {
      return option.componentOptions.children[0].text.indexOf(value) >= 0
    },
    // 获取业务员
    async getSalesmanList() {
      const { code, result } = await apiGetSalesmanList()
      if (code === 0) {
        this.salesmanList = result.records
      }
    },
    // 新增业务员
    handleAddsalesman() {
      this.formList.push({
        salespersonName: undefined,
        electricityRatio: undefined
      })
    },
    // 删除业务员
    handleDelsalesman(index) {
      this.formList.splice(index, 1)
    },
    // 校验
    async validateForm() {
      const promiseRef = this.$refs.ruleForm.map(item => item.validate())
      await Promise.all(promiseRef)
      return this.formList
    }
  }
}
</script>

<style lang="less" scoped></style>
